import QtQuick 2.0
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import "../../js/UI.js" as Style
import QtQuick 2.4
import QtGraphicalEffects 1.0
import QtQml 2.2
Rectangle {
    id: rect
    property alias m_headSource: m_head.m_source
    property alias m_name: m_NameText_id.text
    property alias m_online: phonetext.text
    color: "transparent"
    width: m_root_id.width
    height: m_lineValue*1.1
    HeadImage {
        id: m_head
        width: is_PCScreen ? 0.7*parent.height : parent.height*0.8
        height: width
        anchors.left: parent.left
        anchors.leftMargin: m_lineValue*0.4
        anchors.verticalCenter: parent.verticalCenter
        nameText: m_NameText_id.text.substring(0,1)
        colorText:m_NameText_id.text.length>1?m_NameText_id.text.substring(1,2):""
    }
    Item {
        width: m_root_id.width - m_lineValue*2
        anchors.left: m_head.right
        anchors.leftMargin:Qt.platform.os != "ios" ? m_lineValue*0.3 : m_lineValue*0.25
        height:is_PCScreen ? parent.height*0.5 : (Qt.platform.os != "ios" ? parent.height*0.8 : parent.height*0.7)
        anchors.verticalCenter: parent.verticalCenter
        AText {
            anchors.left: parent.left
            anchors.top: parent.top
            anchors.topMargin: phonetext.text===""?(parent.height-paintedHeight)/2:(parent.height/2-paintedHeight)/2
            id: m_NameText_id
            width: parent.width
            font.pointSize: is_PCScreen ? 13 :  16
            font.family: Style.fontfamily
            elide: Text.ElideRight
            wrapMode: Text.NoWrap
        }
        AText{
            id: phonetext
            anchors.bottom: parent.bottom
            anchors.bottomMargin: (parent.height/2-paintedHeight)/2
            font.pointSize: 14
            elide: Text.ElideRight
            wrapMode: Text.NoWrap
            color: "#808080"
            text:"2018-10-11"
        }
        AText{
            anchors.left: phonetext.right
            anchors.leftMargin: 0.2*m_lineValue
            anchors.bottom: parent.bottom
            anchors.bottomMargin: (parent.height/2-paintedHeight)/2
            font.pointSize: is_PCScreen ? 12 :  14
            font.family: Style.fontfamily
            elide: Text.ElideRight
            wrapMode: Text.NoWrap
            color: "#808080"
            width: parent.width
            text:"10:00:22"
        }

    }
    AText{
        anchors.right: parent.right
        anchors.rightMargin: 0.4*m_lineValue
        font.pointSize: is_PCScreen ? 12 :  14
        font.family: Style.fontfamily
        color: "#808080"
        text:"6秒"
        anchors.verticalCenter: parent.verticalCenter
    }
    ProgressBar{
        id:progress
        visible: false
        value: 0.05
        anchors.right: parent.right
        anchors.rightMargin: 0.4*m_lineValue
        anchors.bottom: parent.bottom
        anchors.left:m_head.right
        anchors.leftMargin: 0.3*m_lineValue
        height: 0.1*m_lineValue
        style: ProgressBarStyle{
            id:progressBarStyl
            background: Rectangle{
                color: "#cccccc"
                height: 0.2*m_lineValue
            }
            progress: Rectangle{
                color: Style.textCommonColor
                clip: true
            }
            panel: Item{
                implicitHeight: 0.2*m_lineValue;
                implicitWidth: progress.width;

                Loader{
                    anchors.fill: parent;
                    sourceComponent: background;
                }
                Loader{
                    anchors.top: parent.top;
                    anchors.left: parent.left;
                    anchors.bottom: parent.bottom;
                    width: currentProgress* (parent.width - 4)
                    sourceComponent: progressBarStyl.progress

                }
            }
        }
    }

    Timer {
        id:time
        interval: 1000
        running: false
        repeat: true
        onTriggered: {
            progress.value +=0.03
            console.log(progress.currentProgress)
            console.log(progress.value)
            if(progress.value>=1){
                time.running = false
                progress.visible = false
            }
        }
    }

    MouseArea{
        anchors.fill: parent
        onClicked: {
            time.running=!time.running
            progress.value = 0
            progress.visible = !progress.visible
        }
    }
}
